<template>
  <div class="query">
    <h1 class="title">查询户室信息</h1>
    <p class="subTitle">帮你快速查询户室信息</p>
    <div class="wrapper-search">
      <div id="qrcode-page" ref="qrcode-page" :style="styleObj"></div>
      <p class="address-info">
        {{ userInfo.villageName }}{{ userInfo.buildingNo }}栋{{
          userInfo.unitNo
        }}单元{{ userInfo.houseNumber }}室
      </p>
      <div class="btn" style="margin-top: 0.54375rem;">
        <button
          type="button"
          style="background: #fff; border: 1px solid #000;"
          @click="close"
        >
          返回
        </button>
        <button type="button" @click="back">
          再次查询
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      styleObj: {
        "box-sizing": "border-box",
        margin: "0 auto",
        width:
          parseInt((window.document.documentElement.clientWidth / 375) * 207) +
          "px",
        height:
          parseInt((window.document.documentElement.clientWidth / 375) * 207) +
          "px",
        "margin-top": "1.6875rem"
      },
      userInfo: {}
    };
  },
  created() {
    console.log(JSON.parse(this.$route.query.data));
    this.userInfo = JSON.parse(this.$route.query.data);
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      console.log(newPath, oldPath);
      if (newPath == "/qrcode") {
        console.log(JSON.parse(this.$route.query.data));
        this.userInfo = JSON.parse(this.$route.query.data);

        this.$nextTick(() => {
          this.qrcode(JSON.parse(this.$route.query.data).qrCode);
        });
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(JSON.parse(this.$route.query.data));
      this.qrcode(JSON.parse(this.$route.query.data).qrCode);
    });
  },
  methods: {
    qrcode(text) {
      // document.getElementById("qrcode-page").innerHTML = "";
      this.$refs["qrcode-page"].innerHTML = "";
      // console.log(text);
      let qrcode = new QRCode("qrcode-page", {
        width: parseInt(
          (window.document.documentElement.clientWidth / 375) * 207
        ),
        height: parseInt(
          (window.document.documentElement.clientWidth / 375) * 207
        ), // 高度
        text, // 二维码内容
        colorDark: "rgba(0,0,0,1)", //前景色
        colorLight: "#fff", // 背景色
        correctLevel: QRCode.CorrectLevel.L //容错等级
      });
      // console.log("二维码", qrcode);
    },
    search() {
      // 流程1: 查询成功 直接显示二维码
      this.$router.push({
        path: "/qrcode"
      });

      // 流程2: 查询失败

      console.log(111);
    },
    back() {
      this.$router.go(-1);
    },
    close() {
      WeixinJSBridge.call("closeWindow");
    }
  }
};
</script>
<style lang="scss" scoped>
.query {
  height: 100%;
  background-image: linear-gradient(#205fff, #52b3ff);
  overflow: hidden;
  text-align: center;
}
.title {
  margin: 0 auto;
  // text-align: center;
  margin: 0;
  margin-top: 2.53125rem;
  padding: 0;
  color: #fff;
  font-size: 3.5rem;
}
.subTitle {
  margin: 0;
  padding: 0;
  color: #fff;
  // text-align: center;
  letter-spacing: 0.2rem;
  font-size: 1.875rem;
}
.wrapper-search {
  width: 20.625rem;
  min-height: 22.525rem;
  background: #fff;
  border-radius: 1.15625rem;
  margin: 0 auto;
  margin-top: 1.59375rem;
  overflow: hidden;
  padding: 0 1rem;
  box-sizing: border-box;
}
.address-info {
  margin: 0;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  white-space: normal;
  margin-top: 1.25rem;
  font-size: 1.25rem;
}
.btn {
  display: flex;
  justify-content: space-around;
}
.btn button {
  width: 8.34375rem;
  background: #f4d554;
  outline: none;
  border: none;
  height: 2.8125rem;
  border-radius: 1.4rem;
  color: #333;
  font-weight: bold;
  font-size: 1.125rem;
}
</style>
